<template>
	<uni-popup ref="popup" type="center" :maskClick="false">
		<view class="bd">
			<view class="title">
				<text class="txt">{{title}}</text>
			</view>
			<view class="cont">
				<text class="txt">{{content}}</text>
			</view>
			<view class="btns">
				<button type="default" class="btn btn-left" @click="notLogin">{{cancelText}}</button>
				<view class="line"></view>
				<button type="default" class="btn btn-right" open-type="getPhoneNumber" @click="close" @getphonenumber="getPhoneNumber" v-if="showPhoneNumber">授权登录</button>
				<button type="default" class="btn btn-right" @click="confirm" v-else>{{confirmText}}</button>
			</view>
		</view>
	</uni-popup>
</template>
<script>
	export default {
		props: {
			title: {
				type: [String],
				default: '提示'
			},
			content: {
				type: [String],
				default: ''
			},
			cancelText: {
				type: [String],
				default: '取消'
			},
			confirmText: {
				type: [String],
				default: '确认登录'
			},
			// 是否显示手机授权按钮
			showPhoneNumber: {
				type: [Boolean],
				default: false
			},
			// 登录账号
			loginAccount: [Object]
		},
		created() {
			this.init();
		},
		methods: {
			async init() {
				if (this.showPhoneNumber) {
					const [err, res] = await uni.login({ provider: 'weixin' });
					this.code = res.code;
				}
			},
			open() {
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			},
			notLogin(){
				this.close();
				this.$emit('notLogin');
			},
			confirm() {
				this.close();
				this.$emit('confirm');
			},
			getPhoneNumber(e) {
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					const mid = this.loginAccount && this.loginAccount.mid ? this.loginAccount.mid : null;
					this.$emit('confirmGetPhoneNumber', { parameter: { iv: e.detail.iv, ciphertext: e.detail.encryptedData, code: this.code }, mid: mid });
					this.close();
				} else {
					this.close();
					this.$emit('cancel');
				}
			}
		}
	}
</script>
<style scoped lang="scss">
	.bd {
		width: 540rpx;
		min-height: 240rpx;
		border-radius: 16rpx;
		background-color: #fff;
	}

	.title {
		height: 110rpx;
		line-height: 110rpx;
		text-align: center;
		font-size: 36rpx;
		color: #000;
	}

	.cont {
		line-height: 48rpx;
		padding: 0 32rpx 30rpx;
		font-size: 28rpx;
		color: #888;
	}

	.btns {
		display: flex;
		align-items: center;
		height: 100rpx;
		border-top: 1rpx solid #ECECEC;

		.btn {
			flex-basis: 50%;
			height: 100%;
			line-height: 100rpx;
			text-align: center;
			font-size: 36rpx;
			color: #999;
			background-color: transparent;

			&-right {
				color: #E1835B;
			}
		}

		.line {
			width: 1rpx;
			height: 100%;
			background-color: #ECECEC;
		}
	}
</style>
